<template>
    <div class="collect">
      <van-nav-bar
      title="我的收藏"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="$router.go(-1)" 
    />
<!-- 收藏列表 -->
      <div class="shoplist">
        <div @click="toDetail(item)" class="shop" v-for="(item,index) in $store.state.collectlist" :key="index">
          <div class="imgbox">
            <img :src="item.picUrl" alt="">
          </div>
          <div class="text">
            <div class="name">{{item.name}}</div>
            <div class="sale"> ☆ {{item.wmPoiScore}} {{item.monthSalesTip}}</div>
            <div class="desc">{{item.minPriceTip}} {{item.shippingFeeTip}}</div>
          </div>
        </div>
          <div v-if="$store.state.collectlist.length == 0" class="empty" >
            未收藏任何店铺， <span @click="$router.push('/index')">去逛逛</span>
          </div>
      </div>
    </div>
</template>

<script>
export default {
  methods:{ //d定义方法
    toDetail(item){ //跳转到详情页
      this.$router.push('/detail/'+item.mtWmPoiId);
    }
  },
}
</script>

<style lang="scss" scoped>
  .shoplist{
  margin: 10px;
  .shop{
    display: flex;
    margin: 10px 0;
    .imgbox{
      width: 80px;
      margin-right: 10px;
      img{
        width: 100%;
      }
    }
    .text{
      font-size: 12px;
    }
  }
  .empty{
      width: 100%;
      height: 300px;
      text-align: center;
      line-height: 300px;
      font-weight: bolder;
      font-size: 18px;
      span{
        color: red;
      }
    }
}

 
</style>